<template>
  <div class="cyberpunk-container" :class="{ 'light-mode': isLightMode }">
    <div class="theme-toggle" @click="toggleTheme">
      <div class="toggle-switch" :class="{ 'light': isLightMode }"></div>
      <span>{{ isLightMode ? '🌙' : '☀️' }}</span>
    </div>

    <div class="cyberpunk-form-wrapper">
      <div class="cyberpunk-header">
        <h1 class="neon-text">{{ isLightMode ? 'REGISTER' : 'REGISTER' }}</h1>
        <div class="glitch-effect" data-text="REGISTER">REGISTER</div>
      </div>

      <form @submit.prevent="submitForm" class="cyberpunk-form">
        <div class="input-group" :class="{ 'error': errors.username }">
          <input
            v-model="user.username"
            type="text"
            class="cyberpunk-input"
            placeholder=" "
            required
            @focus="handleFocus"
            @blur="validateField('username')"
          />
          <label class="cyberpunk-label">用户名</label>
          <div class="input-border"></div>
          <i class="input-icon">👤</i>
          <div v-if="errors.username" class="error-message">{{ errors.username }}</div>
        </div>

        <div class="input-group" :class="{ 'error': errors.password }">
          <input
            v-model="user.password"
            type="password"
            class="cyberpunk-input"
            placeholder=" "
            required
            @focus="handleFocus"
            @blur="validateField('password')"
          />
          <label class="cyberpunk-label">密码</label>
          <div class="input-border"></div>
          <i class="input-icon">🔒</i>
          <div v-if="errors.password" class="error-message">{{ errors.password }}</div>
        </div>

        <div class="input-group" :class="{ 'error': errors.phone }">
          <input
            v-model="user.phone"
            type="tel"
            class="cyberpunk-input"
            placeholder=" "
            required
            @focus="handleFocus"
            @blur="validateField('phone')"
          />
          <label class="cyberpunk-label">手机号</label>
          <div class="input-border"></div>
          <i class="input-icon">📱</i>
          <div v-if="errors.phone" class="error-message">{{ errors.phone }}</div>
        </div>

        <div class="input-group select-group" :class="{ 'error': errors.sex }">
          <select
            v-model="user.sex"
            class="cyberpunk-input cyberpunk-select"
            @focus="handleFocus"
            @blur="validateField('sex')"
          >
            <option value="" disabled>性别</option>
            <option value="1">男</option>
            <option value="0">女</option>
          </select>
          <label class="cyberpunk-label">性别</label>
          <div class="input-border"></div>
          <i class="input-icon">⚥</i>
          <div v-if="errors.sex" class="error-message">{{ errors.sex }}</div>
        </div>

        <div class="input-group" :class="{ 'error': errors.money }">
          <input
            v-model.number="user.money"
            type="number"
            class="cyberpunk-input"
            placeholder=" "
            required
            @focus="handleFocus"
            @blur="validateField('money')"
          />
          <label class="cyberpunk-label">存款</label>
          <div class="input-border"></div>
          <i class="input-icon">💰</i>
          <div v-if="errors.money" class="error-message">{{ errors.money }}</div>
        </div>

        <div class="button-group">
          <button type="button" class="cyberpunk-button" @click="register" :disabled="isSubmitting || !isFormValid">
            <span>{{ isSubmitting ? 'REGISTERING...' : '注册' }}</span>
            <div class="button-border"></div>
          </button>

          <button type="button" class="cyberpunk-button secondary" @click="resetForm">
            <span>重置</span>
            <div class="button-border"></div>
          </button>
        </div>
      </form>
    </div>

    <div class="grid-overlay"></div>
  </div>
</template>

<script>
import { register } from "@/api/user";

export default {
  name: "registerview",
  data() {
    return {
      isLightMode: false,
      isSubmitting: false,
      user: {
        username: '',
        password: '',
        phone: '',
        sex: '',
        money: null,
        createTime: this.getNowFormatDate(),
      },
      errors: {}
    }
  },
  computed: {
    isFormValid() {
      return Object.keys(this.errors).length === 0 &&
             this.user.username &&
             this.user.password &&
             this.user.phone &&
             this.user.sex !== '' &&
             this.user.money !== null;
    }
  },
  watch: {
    user: {
      handler() {
        // 清除所有错误，当用户开始输入时
        this.errors = {};
      },
      deep: true
    }
  },
  methods: {
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      return year + seperator1 + month + seperator1 + strDate;
    },

    validateField(field) {
      switch (field) {
        case 'username':
          if (!this.user.username) {
            this.$set(this.errors, 'username', '用户名不能为空');
          } else if (this.user.username.length < 3) {
            this.$set(this.errors, 'username', '用户名至少3个字符');
          } else if (this.user.username.length > 20) {
            this.$set(this.errors, 'username', '用户名不能超过20个字符');
          } else {
            this.$delete(this.errors, 'username');
          }
          break;

        case 'password':
          if (!this.user.password) {
            this.$set(this.errors, 'password', '密码不能为空');
          } else if (this.user.password.length < 6) {
            this.$set(this.errors, 'password', '密码至少6个字符');
          } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(this.user.password)) {
            this.$set(this.errors, 'password', '密码必须包含大小写字母和数字');
          } else {
            this.$delete(this.errors, 'password');
          }
          break;

        case 'phone':
          if (!this.user.phone) {
            this.$set(this.errors, 'phone', '手机号不能为空');
          } else if (!/^1[3-9]\d{9}$/.test(this.user.phone)) {
            this.$set(this.errors, 'phone', '请输入正确的手机号');
          } else {
            this.$delete(this.errors, 'phone');
          }
          break;

        case 'sex':
          if (!this.user.sex && this.user.sex !== '0') {
            this.$set(this.errors, 'sex', '请选择性别');
          } else {
            this.$delete(this.errors, 'sex');
          }
          break;

        case 'money':
          if (this.user.money === null || this.user.money === '') {
            this.$set(this.errors, 'money', '存款金额不能为空');
          } else if (this.user.money < 0) {
            this.$set(this.errors, 'money', '存款金额不能为负数');
          } else if (this.user.money > 100000000) {
            this.$set(this.errors, 'money', '存款金额过大');
          } else {
            this.$delete(this.errors, 'money');
          }
          break;
      }
    },

    validateForm() {
      const fields = ['username', 'password', 'phone', 'sex', 'money'];
      fields.forEach(field => this.validateField(field));
      return Object.keys(this.errors).length === 0;
    },

    async register(){
      if (!this.validateForm()) {
        this.$message.error('请检查表单填写内容');
        return;
      }

      this.isSubmitting = true;
      try {
        const res = await register(this.user);
        if(res.data.code === 200){
          this.$message.success('注册成功！');
          this.$router.push('/');
          this.resetForm();
        } else {
          this.$message.error(res.data.message || '注册失败！');
        }
      } catch(err){
        console.log(err);
        this.$message.error('注册失败，请稍后重试');
      } finally {
        this.isSubmitting = false;
      }
    },

    resetForm() {
      this.user = {
        username:'',
        password:'',
        phone:'',
        sex:'',
        money:null,
        createTime:this.getNowFormatDate()
      };
      this.errors = {};
      this.$message.info('表单已重置');
    },

    toggleTheme() {
      this.isLightMode = !this.isLightMode;
    },

    handleFocus(event) {
      event.target.parentElement.classList.add('focused');
    },

    handleBlur(event) {
      event.target.parentElement.classList.remove('focused');
    },

    submitForm() {
      this.register();
    }
  }
}
</script>

<style scoped>
.cyberpunk-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  transition: background 0.5s ease;
}

.cyberpunk-container.light-mode {
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb, #e0c3fc);
}

.cyberpunk-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 10% 20%, rgba(0, 247, 255, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(255, 0, 231, 0.1) 0%, transparent 20%);
  z-index: 0;
}

.cyberpunk-container.light-mode::before {
  background:
    radial-gradient(circle at 10% 20%, rgba(100, 150, 255, 0.2) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(255, 100, 200, 0.2) 0%, transparent 20%);
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 0;
  animation: grid-move 20s linear infinite;
}

.cyberpunk-container.light-mode .grid-overlay {
  background:
    linear-gradient(rgba(100, 150, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 150, 255, 0.2) 1px, transparent 1px);
}

@keyframes grid-move {
  0% { background-position: 0 0; }
  100% { background-position: 30px 30px; }
}

.cyberpunk-form-wrapper {
  background: rgba(10, 10, 35, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 247, 255, 0.3);
  box-shadow:
    0 0 15px rgba(0, 247, 255, 0.5),
    0 0 30px rgba(0, 247, 255, 0.2),
    inset 0 0 10px rgba(0, 247, 255, 0.3);
  border-radius: 5px;
  padding: 40px;
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: all 0.5s ease;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cyberpunk-container.light-mode .cyberpunk-form-wrapper {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(100, 150, 255, 0.5);
  box-shadow:
    0 0 15px rgba(100, 150, 255, 0.5),
    0 0 30px rgba(100, 150, 255, 0.2),
    inset 0 0 10px rgba(100, 150, 255, 0.3);
}

.cyberpunk-form-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.2), transparent);
  transition: 0.5s;
}

.cyberpunk-container.light-mode .cyberpunk-form-wrapper::before {
  background: linear-gradient(90deg, transparent, rgba(100, 150, 255, 0.3), transparent);
}

.cyberpunk-form-wrapper:hover::before {
  left: 100%;
}

.cyberpunk-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.neon-text {
  color: #00f7ff;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin: 0;
  text-shadow:
    0 0 10px #00f7ff,
    0 0 20px #00f7ff,
    0 0 30px #00f7ff;
  font-weight: normal;
  transition: all 0.5s ease;
}

.cyberpunk-container.light-mode .neon-text {
  color: #6496ff;
  text-shadow:
    0 0 10px #6496ff,
    0 0 20px #6496ff,
    0 0 30px #6496ff;
}

.glitch-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #ff00e9;
  animation: glitch 2s infinite;
  opacity: 0.8;
  transition: all 0.5s ease;
}

.cyberpunk-container.light-mode .glitch-effect {
  color: #ff64c8;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}

.cyberpunk-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.input-group {
  position: relative;
}

.input-group.error .cyberpunk-input {
  border-bottom: 1px solid #ff0055;
}

.cyberpunk-container.light-mode .input-group.error .cyberpunk-input {
  border-bottom: 1px solid #ff0055;
}

.cyberpunk-input {
  width: 100%;
  padding: 15px 10px 15px 40px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 1rem;
  font-family: 'Courier New', monospace;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(0, 247, 255, 0.3);
  transition: all 0.3s ease;
}

.cyberpunk-container.light-mode .cyberpunk-input {
  color: #333;
  border-bottom: 1px solid rgba(100, 150, 255, 0.3);
}

.cyberpunk-input:focus {
  border-bottom: 1px solid #00f7ff;
}

.cyberpunk-container.light-mode .cyberpunk-input:focus {
  border-bottom: 1px solid #6496ff;
}

.cyberpunk-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  padding-left: 40px;
  cursor: pointer;
}

.cyberpunk-container.light-mode .cyberpunk-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236496ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  color: #333;
}

.cyberpunk-select option {
  background-color: #0a0a23;
  color: #00f7ff;
  padding: 12px;
}

.cyberpunk-container.light-mode .cyberpunk-select option {
  background-color: #ffffff;
  color: #6496ff;
}

.cyberpunk-select:focus option:checked {
  background-color: rgba(0, 247, 255, 0.2);
}

.cyberpunk-container.light-mode .cyberpunk-select:focus option:checked {
  background-color: rgba(100, 150, 255, 0.2);
}

.cyberpunk-label {
  position: absolute;
  left: 40px;
  top: 15px;
  color: #00f7ff;
  pointer-events: none;
  transition: 0.3s;
  z-index: 1;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.cyberpunk-container.light-mode .cyberpunk-label {
  color: #6496ff;
}

.cyberpunk-input:focus + .cyberpunk-label,
.cyberpunk-input:not(:placeholder-shown) + .cyberpunk-label {
  top: -20px;
  left: 0;
  font-size: 0.8rem;
  color: #ff00e9;
}

.cyberpunk-container.light-mode .cyberpunk-input:focus + .cyberpunk-label,
.cyberpunk-container.light-mode .cyberpunk-input:not(:placeholder-shown) + .cyberpunk-label {
  color: #ff64c8;
}

.input-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f7ff, #ff00e9);
  transition: 0.5s;
}

.cyberpunk-container.light-mode .input-border {
  background: linear-gradient(90deg, #6496ff, #ff64c8);
}

.input-group.focused .input-border,
.cyberpunk-input:not(:placeholder-shown) ~ .input-border {
  width: 100%;
}

.input-group.focused .cyberpunk-input {
  box-shadow: 0 5px 10px -10px rgba(0, 247, 255, 0.5);
}

.cyberpunk-container.light-mode .input-group.focused .cyberpunk-input {
  box-shadow: 0 5px 10px -10px rgba(100, 150, 255, 0.5);
}

.input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #00f7ff;
  z-index: 3;
  font-size: 1.2rem;
}

.cyberpunk-container.light-mode .input-icon {
  color: #6496ff;
}

.select-group .input-icon {
  z-index: 3;
}

.button-group {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.cyberpunk-button {
  flex: 1;
  background: transparent;
  border: none;
  padding: 15px;
  color: #00f7ff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  border: 1px solid rgba(0, 247, 255, 0.5);
  border-radius: 3px;
}

.cyberpunk-container.light-mode .cyberpunk-button {
  color: #6496ff;
  border: 1px solid rgba(100, 150, 255, 0.5);
}

.cyberpunk-button.secondary {
  color: #ff00e9;
  border: 1px solid rgba(255, 0, 233, 0.5);
}

.cyberpunk-container.light-mode .cyberpunk-button.secondary {
  color: #ff64c8;
  border: 1px solid rgba(255, 100, 200, 0.5);
}

.cyberpunk-button span {
  position: relative;
  z-index: 2;
}

.cyberpunk-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 247, 255, 0.1);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.5s;
  z-index: 1;
}

.cyberpunk-container.light-mode .cyberpunk-button::before {
  background: rgba(100, 150, 255, 0.1);
}

.cyberpunk-button.secondary::before {
  background: rgba(255, 0, 233, 0.1);
}

.cyberpunk-container.light-mode .cyberpunk-button.secondary::before {
  background: rgba(255, 100, 200, 0.1);
}

.cyberpunk-button:hover::before {
  transform: scaleX(1);
}

.cyberpunk-button:hover {
  box-shadow:
    0 0 10px rgba(0, 247, 255, 0.5),
    inset 0 0 10px rgba(0, 247, 255, 0.3);
  text-shadow: 0 0 5px #00f7ff;
  transform: translateY(-2px);
}

.cyberpunk-container.light-mode .cyberpunk-button:hover {
  box-shadow:
    0 0 10px rgba(100, 150, 255, 0.5),
    inset 0 0 10px rgba(100, 150, 255, 0.3);
  text-shadow: 0 0 5px #6496ff;
}

.cyberpunk-button.secondary:hover {
  box-shadow:
    0 0 10px rgba(255, 0, 233, 0.5),
    inset 0 0 10px rgba(255, 0, 233, 0.3);
  text-shadow: 0 0 5px #ff00e9;
}

.cyberpunk-container.light-mode .cyberpunk-button.secondary:hover {
  box-shadow:
    0 0 10px rgba(255, 100, 200, 0.5),
    inset 0 0 10px rgba(255, 100, 200, 0.3);
  text-shadow: 0 0 5px #ff64c8;
}

.cyberpunk-button:active {
  transform: translateY(0);
}

.cyberpunk-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cyberpunk-button:disabled:hover {
  box-shadow: none;
  text-shadow: none;
}

.button-border {
  display: none;
}

/* Theme Toggle Styles */
.theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  background: rgba(10, 10, 35, 0.5);
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid rgba(0, 247, 255, 0.3);
  transition: all 0.3s ease;
}

.cyberpunk-container.light-mode .theme-toggle {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(100, 150, 255, 0.5);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
}

.cyberpunk-container.light-mode .theme-toggle:hover {
  box-shadow: 0 0 10px rgba(100, 150, 255, 0.5);
}

.toggle-switch {
  width: 30px;
  height: 15px;
  background: #00f7ff;
  border-radius: 10px;
  margin-right: 10px;
  position: relative;
  transition: all 0.3s ease;
}

.cyberpunk-container.light-mode .toggle-switch {
  background: #6496ff;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00f7ff;
  top: -1.5px;
  left: 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
}

.cyberpunk-container.light-mode .toggle-switch::after {
  background: #6496ff;
  box-shadow: 0 0 5px rgba(100, 150, 255, 0.5);
}

.toggle-switch.light {
  background: #ff64c8;
}

.toggle-switch.light::after {
  background: #ff64c8;
  left: 12px;
  box-shadow: 0 0 5px rgba(255, 100, 200, 0.5);
}

.theme-toggle span {
  font-size: 18px;
}

/* Error message styles */
.error-message {
  color: #ff0055;
  font-size: 0.8rem;
  margin-top: 5px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .cyberpunk-form-wrapper {
    padding: 20px;
    margin: 20px;
  }

  .button-group {
    flex-direction: column;
  }

  .neon-text {
    font-size: 2rem;
  }

  .theme-toggle {
    top: 10px;
    right: 10px;
  }

  .cyberpunk-input {
    padding: 12px 10px 12px 35px;
  }

  .cyberpunk-label {
    left: 35px;
    top: 12px;
  }

  .input-icon {
    font-size: 1rem;
  }
}
</style>
